<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			ul>li{
				width: 100px;
				height: 100px;
				float: left;
				border: 1px solid gray;
				margin-left: 10px;
			}
			ul>li:hover{
				background: pink;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>我的撒大大</li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<audio src=""></audio>
	</body>
	<script type="text/javascript">
		var lis =document.querySelectorAll("li");
//		console.log(lis);
		var audio=document.querySelector("audio");
		var music=["a1.mp3","a2.mp3","a3.mp3","a4.mp3","a5.mp3","a6.mp3","a7.mp3"];
//		console.log(music);
		for (var i=0;i<lis.length;i++) 
		{
			lis[i].index=i;
			lis[i].onmouseover=function()
			{
				var index=this.index;
				audio.src="img/"+music[index];
				audio.play();
			}
		}
		
	</script>
</html>
